<style>
/* 自定义下拉组件样式 */
.custom-select-container {
    position: relative;
    display: inline-block;
    width: 100%;
    transition: all 0.3s ease;
}

.custom-select-display {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    background: white;
    cursor: pointer;
    min-height: 30px;
    max-height: 30px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-select-display:after {
    content: '▼';
    font-size: 12px;
    color: #666;
    transition: transform 0.3s ease;
}

.custom-select-container.expanded .custom-select-display:after {
    transform: rotate(180deg);
}

.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.custom-select-container.expanded .custom-select-options {
    max-height: 400px;
    overflow-y: auto;
}

.custom-select-option {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.custom-select-option:hover {
    background-color: #f5f5f5;
}

.custom-select-option.selected {
    background-color: #007bff;
    color: white;
}

.custom-select-option.option-disabled {
    color: #999;
    cursor: not-allowed;
    background-color: #f9f9f9;
    font-style: italic;
}

.custom-select-option.option-disabled:hover {
    background-color: #f9f9f9;
}

.custom-select-controls {
    padding: 8px 12px;
    border-bottom: 2px solid #007bff;
    background-color: #f8f9fa;
    display: flex;
    gap: 10px;
}

.custom-select-control-btn {
    padding: 4px 8px;
    border: 1px solid #007bff;
    background: white;
    color: #007bff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.custom-select-control-btn:hover {
    background: #007bff;
    color: white;
}

.hover-expand-select {
    // 移除悬停展开效果，保持正常高度
}

/* 地点和班级选择框 - 移除悬停效果，设置根据内容自适应高度 */
#c-ocation_class, #c-classes_id {
    height: auto !important;
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
}
</style>

<form id="add-form" class="form-horizontal" style="position:relative;background: #fff" role="form"
      data-toggle="validator" method="POST" action="">
    <link rel="stylesheet" href="/assets/js/backend/common/flatpickr.min.css">
    <!-- 修改：移除flatpickr.js和zh.js的加载，改为在coursetable.js中动态加载 -->
    <div class="panel">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tabs_0" data-toggle="tab" aria-expanded="true">课程项目</a></li>
        </ul>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="tabs_0">
                <input type="hidden" id="c-id" name="row[id]" value="NULL" class="form-control" data-rule=""
                       data-tip="ID"/>
                <div class="form-group">
                    <label for="c-name" class="control-label col-xs-12 col-sm-2">项目名称:</label>
                    <div class="col-xs-12 col-sm-8" id="div-name">
                        <input type="text" id="c-name" name="row[name]" value="{$info.coursetablename}" class="form-control"
                               data-tip="项目名称" data-rule="required" placeholder="{$info.coursetablename}"/>
                    </div>
                </div>

                <div class="form-group">
                    <label for="c-school_id" class="control-label col-xs-12 col-sm-2">学校:</label>
                    <div class="col-xs-12 col-sm-8" id="div-school_id">
                        <select name="row[school_id]" id="c-school_id" class="form-control">
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label for="c-ocation_class" class="control-label col-xs-12 col-sm-2">地点:<br><small class="text-info">按住Ctrl键可多选</small></label>
                    <div class="col-xs-12 col-sm-8" id="div-ocation_class">
                        <div class="custom-select-controls">
                            <button type="button" class="custom-select-control-btn" onclick="selectAll('c-ocation_class')">全选</button>
                            <button type="button" class="custom-select-control-btn" onclick="deselectAll('c-ocation_class')">全不选</button>
                        </div>
                        <select name="row[ocation_id][]" id="c-ocation_class" class="form-control selects"
                                multiple>
                        </select>
                        <div class="text-muted small mt-1">
                            <i class="fa fa-info-circle"></i> 提示：按住Ctrl键并单击选项可选择多个项目
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="c-classes_id" class="control-label col-xs-12 col-sm-2">班级:<br><small class="text-info">按住Ctrl键可多选</small></label>
                    <div class="col-xs-12 col-sm-8" id="div-classes_id">
                        <div class="custom-select-controls">
                            <button type="button" class="custom-select-control-btn" onclick="selectAll('c-classes_id')">全选</button>
                            <button type="button" class="custom-select-control-btn" onclick="deselectAll('c-classes_id')">全不选</button>
                        </div>
                        <select name="row[classes_id][]" id="c-classes_id" class="selects form-control"
                                multiple>
                        </select>
                        <div class="text-muted small mt-1">
                            <i class="fa fa-info-circle"></i> 提示：按住Ctrl键并单击选项可选择多个项目
                        </div>
                    </div>
                </div>
                <script>
                    function selectAll(selectId) {
                        $('#' + selectId + ' option').each(function() {
                            if (!$(this).prop('disabled') && !$(this).hasClass('disabled')) {
                                $(this).prop('selected', true);
                            }
                        });
                    }
                    function deselectAll(selectId) {
                        $('#' + selectId + ' option').prop('selected', false);
                    }
                </script>

                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">排除国际假日:</label>
                    <div class="col-xs-12 col-sm-8" id="div-exclint_holidays">
                        <input class="c-switch" name="row[exclint_holidays]" type="hidden" value="1">
                        <a href="javascript:;" data-toggle="switcher" class="btn-switcher active" data-input-id="row[exclint_holidays]" data-yes="1" data-no="0">
                            <i class="fa fa-toggle-on text-success fa-2x"></i>
                        </a>
                        <div data-favisible="switch=1" class="p-3" style="display:none;">是</div>
                        <div data-favisible="switch=0" class="p-3">否</div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">国际假日:</label>
                    <div class="col-xs-12 col-sm-8" id="div-holidays">
                        <textarea class="c-holidays form-control" name="row[holidays]" ></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label for="c-exclint_day" class="control-label col-xs-12 col-sm-2">指定日期排除:</label>
                    <div class="col-xs-12 col-sm-8" id="div-exclint_day">
                        <div class="form-inline">
                            <input type="text"  id="c-exclint_day" name="row[exclint_day]" value="<?php echo date('Y-m-d');?>" class="form-control"  data-date-format="YYYY-MM-DD" data-tip="指定日期排除" data-rule=""  />
                        </div>
                    </div>
                </div>

                <div class="form-group layer-footer">
                    <label class="control-label col-xs-12 col-sm-2"></label>
                    <div class="col-xs-12 col-sm-8">
                        <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
                        <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade in coursetable_tabs_1" id="tabs_1"></div>
        </div>
    </div>
</form>



